<!-- ChatMessages.vue -->
<template>
  <t-list ref="chatBox" class="message-list">
    <!-- 欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-avatar">
        <t-icon name="logo-github" class="avatar-icon" />
      </div>
      <h2 class="welcome-title">您好！我是{{ botConfig.name }}</h2>
      <p class="welcome-subtitle">{{ botConfig.onboarding_info.prologue }}</p>
      <div class="suggestions-wrapper">
        <div class="suggestions-list">
          <t-button
            v-for="(question, index) in botConfig.onboarding_info.suggested_questions"
            :key="index"
            shape="round"
            variant="outline"
            class="suggestion-btn"
            @click="$emit('suggestion-click', question)"
          >
            {{ question }}
          </t-button>
        </div>
      </div>
    </div>
  </t-list>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';

defineProps({
  messages: { type: Array, required: true },
  botConfig: { type: Object },
  isLoading: { type: Boolean, required: true },
});

defineEmits(['suggestion-click', 'preview-file']);
</script>

<style lang="less" scoped>
@import url('../index.less');
</style>
